<template>
	<div>
		<el-row :gutter="16">
			<el-col :span="8">
				<div class="left_content dflex_c">
					<div class="dflex_sb dflex_c" style="width: 80%;" v-loading="leftLoading" element-loading-background="rgba(255, 255, 255, 0.8)">
						<div class="detail_left dflex_c dflex_d_c">
							<el-image
								class="headimg"
								:src="memberData.member_headimg || 'https://7463-tcb-rflrz31u8yan4rr9ad60d-268679-1308293149.tcb.qcloud.la/1659579992133_0.png'"
								:preview-src-list="memberData.imgs"
								fit="contain"
							></el-image>
							<div class="ellipsis_2 left_just">{{ memberData.member_name || '--' }}</div>
							<el-tooltip v-if="expireTime" popper-class="vipTooltip" :content="'到期时间: ' + expireTime" placement="right" effect="light">
								<div class="iconfont iconVIP crpr margin_t_10"></div>
							</el-tooltip>
						</div>
						<div class="detail_right">
							<div class="dflex margin_b_10">
								<div class="detail_title right_just">性别：</div>
								<div>{{ memberData.member_gender }}</div>
							</div>
							<div class="dflex margin_b_10">
								<div class="detail_title right_just">城市：</div>
								<div>{{ memberData.member_city || '--' }}</div>
							</div>
							<div class="dflex margin_b_10">
								<div class="detail_title right_just">登录ip：</div>
								<div>{{ memberData.member_login_current_ip || '--' }}</div>
							</div>
							<div class="dflex margin_b_10">
								<div class="detail_title right_just">注册时间：</div>
								<div>{{ memberData.create_time }}</div>
							</div>
							<div class="dflex">
								<div class="detail_title right_just">上次登录时间：</div>
								<div>{{ memberData.last_modify_time || '--' }}</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="16">
				<div class="right_content dflex_c sele_none">
					<div class="dflex" style="width: 80%;" v-loading="rightLoading" element-loading-background="rgba(255, 255, 255, 0.8)">
						<div class="dflex_vertical_c order">
							<div class="circle_txt dflex_c margin_r_20">券</div>
							<div>
								<div class="order_title">优惠券</div>
								<v-countup class="order_data" start-value="0" :end-value="memberData.member_coupon_cnt"></v-countup>
							</div>
						</div>
						<div class="dflex_vertical_c order">
							<div class="circle_txt dflex_c margin_r_20">金</div>
							<div>
								<div class="order_title">累计消费</div>
								<v-countup class="order_data" start-value="0" :end-value="memberData.member_monetary" decimals="2" :options="{ prefix: '￥' }"></v-countup>
							</div>
						</div>
						<div class="dflex_vertical_c order">
							<div class="circle_txt dflex_c margin_r_20">登</div>
							<div>
								<div class="order_title">登录次数</div>
								<v-countup class="order_data" start-value="0" :end-value="memberData.member_login_cnt"></v-countup>
							</div>
						</div>
						<div class="dflex_vertical_c order">
							<div class="circle_txt dflex_c margin_r_20">额</div>
							<div>
								<div class="order_title">钱包余额</div>
								<v-countup class="order_data" start-value="0" :end-value="memberData.member_amount" decimals="2" :options="{ prefix: '￥' }"></v-countup>
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<div class="detail pos_r">
			<el-tabs v-model="tab" @tab-click="cutTabs">
				<el-tab-pane :label="`订单 ${totalObj.order_cnt || 0}`" name="order"><order v-if="tab == 'order'"></order></el-tab-pane>
				<el-tab-pane :label="`足迹 ${totalObj.footprint_cnt || 0}`" name="footprint"><footprint v-if="tab == 'footprint'"></footprint></el-tab-pane>
				<el-tab-pane :label="`收藏 ${totalObj.collect_cnt || 0}`" name="collect"><collect v-if="tab == 'collect'"></collect></el-tab-pane>
				<el-tab-pane :label="`地址 ${totalObj.address_cnt || 0}`" name="consigneeAddress">
					<consigneeAddress v-if="tab == 'consigneeAddress'"></consigneeAddress>
				</el-tab-pane>
				<el-tab-pane :label="`优惠券 ${totalObj.coupon_cnt || 0}`" name="coupon"><coupon v-if="tab == 'coupon'"></coupon></el-tab-pane>
				<el-tab-pane :label="`积分 ${totalObj.integral_cnt || 0}`" name="integral"><integral v-if="tab == 'integral'"></integral></el-tab-pane>
				<el-tab-pane :label="`钱包记录 ${totalObj.wallet_cnt || 0}`" name="wallet"><wallet v-if="tab == 'wallet'"></wallet></el-tab-pane>
			</el-tabs>
			<div class="btn pos_a"><el-button round icon="el-icon-back" class="return-btn" @click="returnPage">返回</el-button></div>
		</div>
	</div>
</template>

<script>
import vCountup from 'vue-countupjs';
import order from './order';
import footprint from './footprint';
import collect from './collect';
import consigneeAddress from './consignee_address';
import coupon from './coupon';
import integral from './integral';
import wallet from './wallet';
const __name = 'wmzmall-member';
export default {
	components: {
		vCountup,
		order,
		footprint,
		collect,
		consigneeAddress,
		coupon,
		integral,
		wallet
	},
	data() {
		return {
			leftLoading: false,
			rightLoading: false,
			dataId: '',
			tab: '',
			expireTime: '',
			req: {
				page: 1,
				rows: 10,
				orderby: 'sort asc'
			},
			memberData: {},
			totalObj: {
				address_cnt: 0,
				collect_cnt: 0,
				footprint_cnt: 0,
				order_cnt: 0,
				wallet_cnt: 0,
				coupon_cnt: 0,
				integral_cnt: 0
			}
		};
	},
	methods: {
		async loadData() {
			this.leftLoading = true;
			this.rightLoading = true;
			await this.$db[__name].tofirst({ _id: this.dataId, loading: false }).then(res => {
				if (res.code == 200) {
					switch (res.datas.member_gender) {
						case 1:
							res.datas.member_gender = '男';
							break;
						case 2:
							res.datas.member_gender = '女';
							break;
						default:
							res.datas.member_gender = '未知';
							break;
					}
					res.datas.imgs = [(res.datas.member_headimg && res.datas.member_headimg.replace("/132", "/0")) || 'https://7463-tcb-rflrz31u8yan4rr9ad60d-268679-1308293149.tcb.qcloud.la/1659579992133_0.png'];
					if (res.datas.create_time) {
						res.datas.create_time = new Date(res.datas.create_time).format();
					}
					if (res.datas.last_modify_time) {
						res.datas.last_modify_time = new Date(res.datas.last_modify_time).format();
					}
					res.datas.member_monetary = res.datas.member_monetary / 100;
					res.datas.member_amount = res.datas.member_amount / 100;
					this.memberData = res.datas;
				}
				this.leftLoading = false;
				this.rightLoading = false;
			});
			
			const totalDatas = await this.$udb.multiSend(
				this.$db['wmzmall-order']
					.collection()
					.where({ is_delete: 0, create_uid: this.dataId })
					.field('_id')
					.getTemp(),
				this.$db['wmzmall-goods-history']
					.collection()
					.where({ create_uid: this.dataId })
					.field('_id')
					.getTemp(),
				this.$db['wmzmall-member-collect']
					.collection()
					.where({ create_uid: this.dataId })
					.field('_id')
					.getTemp(),
				this.$db['wmzmall-member-address']
					.collection()
					.where({ create_uid: this.dataId })
					.field('_id')
					.getTemp(),
				this.$db['wmzmall-member-money-log']
					.collection()
					.where({ create_uid: this.dataId })
					.field('_id')
					.getTemp(),
				this.$db['wmzmall-marketing-coupon']
					.collection()
					.where({ member_id: this.dataId })
					.field('_id')
					.getTemp(),
				this.$db['wmzmall-integral-record']
					.collection()
					.where({ member_id: this.dataId })
					.field('_id')
					.getTemp()
			);
			console.log(totalDatas)
			this.totalObj.order_cnt = totalDatas.result.dataList[0].data.length;
			this.totalObj.footprint_cnt = totalDatas.result.dataList[1].data.length;
			this.totalObj.collect_cnt = totalDatas.result.dataList[2].data.length;
			this.totalObj.address_cnt = totalDatas.result.dataList[3].data.length;
			this.totalObj.wallet_cnt = totalDatas.result.dataList[4].data.length;
			this.totalObj.coupon_cnt = totalDatas.result.dataList[5].data.length;
			this.totalObj.integral_cnt = totalDatas.result.dataList[6].data.length;
		},
		cutTabs(res) {
			uni.setStorage({
				key: '__tabs' + this.$route.path,
				data: res.name
			});
		},
		returnPage() {
			if (this.$route.query.tab == '用户详情') {
				uni.$emit('closeTab');
				uni.redirectTo({ url: '/pages/user/list/user_list' });
			} else if (this.$route.query.tab == '会员详情') {
				uni.$emit('closeTab');
				uni.redirectTo({ url: '/pages/user/member_paying' });
			}
		}
	},
	created() {
		if (this.$route.query.tab == '会员详情') {
			this.expireTime = this.$route.query.time;
		}

		this.dataId = this.$route.query.id || '';
		this.loadData();
	},
	mounted() {
		this.tab = uni.getStorageSync('__tabs' + this.$route.path) || 'order';
	}
};
</script>

<style>
.left_content,
.right_content {
	background-color: #fff;
	height: 200px;
	border-radius: 10px;
}

.detail_left {
	margin: 0 80px 0 0;
}

.iconVIP {
	display: flex;
	justify-content: center;
	align-items: center;
	color: rgba(255, 255, 255, 1);
	width: 50px;
	height: 20px;
	font-size: 26px;
	background-color: #f46f4d;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.detail_title {
	color: #8a8a8a;
	width: 8.125rem;
	user-select: none;
}

.order {
	width: 220px;
	cursor: pointer;
}

.circle_txt {
	font-size: 24px;
	color: #fff;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: #ff6b6b;
	transition: transform 0.2s;
}

.order:hover .circle_txt {
	transform: scale(1.1);
}

.order_title {
	font-size: 14px;
}

.order_data {
	font-size: 28px;
}

.detail .btn {
	transform: translate(-0, -50%);
	top: 50%;
	right: 0;
}

.ellipsis_2 {
	max-width: 100px;
}
</style>
